.class{
    width: 1000px;
    height: 760px;
    background: #fff;
        position: absolute;
    top: 75px;
    left: 40px;
 
}

.class-hed{
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    img{
        width: 95%;
        border-radius: 7px;
    }
}

.class-body{
      width: 100%;
        height: 90%;
 
          display: flex;
}

.class-lt{
    width: 20%;
    height: 100%;
    /* background: #b0d2f1; */
  
    ul{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    ul li{
        display: flex;
        width: 60%;
        height: 50px;
       
        align-items: center;
        background:#e5ebee;
        .iconfont{
            font-size: 20px;
            margin-left: 10px;
        }
        .h1{
            font-size: 18px;
            font-weight: 600;
            margin-left: 3px;
        }
    }
     ul li:hover{
        background: #e9ebf2;
     }
}

.class-rt{
    width: 80%;
    height: 100%;
    /* background: #c3e3b0; */
    ul{
    height: 68px;
    border-bottom: 1px solid #ccc;
    }
        ul li{
              width: 80px;
              height: 30px;
              line-height: 30px;
        }
    ul li:hover{
      
        background: linear-gradient(to right,#ffb139,#ff750c);
        color: #fff;
        border-radius: 34px;
    }
}